import React, { useState } from "react";
import MyInput from "./MyInput";

const Form: React.FC = () => {
  const [show, setShow] = useState(false);
  const [firstName, setFirstName] = useState("Taylor");
  const [lastName, setLastName] = useState("Swift");
  const [upper] = useState(false);
  console.time("计算开始");
  const name = firstName + " " + lastName;
  for (let i = 0; i < 1000000000; i++) {}
  console.timeEnd("计算结束");

  return (
    <>
      <button onClick={() => setShow(s => !s)}>{show ? "隐藏" : "展示"}表单</button>
      <br />
      <hr />
      {show && (
        <>
          <label>
            输入你的名：
            <MyInput value={firstName} onChange={setFirstName} shouldFocus />
          </label>
          <br />
          <label>
            输入你的姓：
            <MyInput value={lastName} onChange={setLastName} shouldFocus={false} />
          </label>
          <p>
            你好，<b>{upper ? name.toUpperCase() : name}</b>
          </p>
        </>
      )}
    </>
  );
};
export default Form;
